<template>
    <div class="container">
        <div class="handle-box">
                <el-form ref="form" :model="form" label-width="90px" class="flex">
                    <!-- <el-form-item label="街道名称：">
                        <el-input v-model="form.name" placeholder="请输入名称" class="handle-input mr10" @input="mohu()"></el-input>
                    </el-form-item> -->
                    <el-form-item label="地区：" class="wid33">
                        <el-select v-model="searchForm.REGION_ID" placeholder="请选择地区" @change="changeStreet">
                            <el-option
                                v-for="item in clientNameOpts"
                                :key="item.REGION_ID"
                                :label="item.REGION_NAME"
                                :value="item.REGION_ID"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="街道：" class="wid33">
                        <el-select v-model="searchForm.STREET_ID" placeholder="请选择街道" clearable>
                            <el-option
                                v-for="item in streetOpts"
                                :key="item.STREET_ID"
                                :label="item.STREET_NAME"
                                :value="item.STREET_ID"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期范围：">
                       <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :clearable="false">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="mohu()">搜索</el-button>
                    </el-form-item>
                    
                </el-form>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            >
                <el-table-column prop="STREET_ID" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="STREET_NAME" label="街道名称"></el-table-column>
                <el-table-column prop="TIME" label="日期范围"></el-table-column>
               <el-table-column prop="Recyclable" label="可回收垃圾累计称重" ></el-table-column>
                <el-table-column prop="Kitchen" label="厨余收垃圾累计称重" ></el-table-column>
                <el-table-column prop="Harmful" label="有害收垃圾累计称重" ></el-table-column>
                <el-table-column prop="Other" label="其他收垃圾累计称重" ></el-table-column>
                <el-table-column label="总称重" >
                    <template slot-scope="scope">
                        {{(scope.row.Recyclable + scope.row.Kitchen + scope.row.Harmful + scope.row.Other)}}
                    </template>
                </el-table-column>
                <el-table-column prop="integral" label="积分" >0</el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pagesize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog v-dialogDrag title="街道统计详情" :visible.sync="editVisible" width="30%" style="padding-top:10px;font-weight:600">
                <el-tabs v-model="activeName" @tab-click="handleClick" >
                  <el-tab-pane :label='item.TYPE_NAME' :name='item.TYPE_ID' v-for="item in ljtype">
                    <el-form ref="form" :model="form" label-width="100px" v-for="items in garbage">
                        <el-form-item :label="items.RUBBISH_NAME">
                            <el-input v-model="items.WEIGHT" readonly="true">kg</el-input>
                        </el-form-item>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
            </el-dialog>
             <!-- <el-dialog v-dialogDrag title="街道统计详情" :visible.sync="editVisible" width="30%" style="padding-top:10px;font-weight:600">
                <el-tabs v-model="editableTabsValue"  @tab-click="handleClick" >
                  <el-tab-pane :label="item.TYPE_NAME"  v-for="(item,index) in ljtype"  :name="item.TYPE_ID">
                    <el-form ref="form" :model="form" label-width="100px" v-for="items in garbage">
                        <el-form-item :label="items.RUBBISH_NAME" >
                            <el-input v-model="items.WEIGHT" readonly  ></el-input>
                        </el-form-item>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
            </el-dialog> -->
        </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
    data(){
        return{
              currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                userList: [],
                address:'',
                name:'',
                dateRange: [],
                labelwidth: '170px',
                activeName: 1,
                ljtype: '',
                garbage: '',
                form:{
                    name:'',
                    value1:''
                },
            searchForm: {
                REGION_ID: '',
                STREET_ID: '',
            },
            clientNameOpts: [],
            streetOpts: [],
            tableData: [
            ],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            totalscore: '',
            rowbobject:'',
            garbage: '',
        }
    },
    async created() {
        const startTime = this.$moment().subtract(1, 'months').format('YYYY-MM-DD');
        const endTime = this.$moment().add(0,'day').format('YYYY-MM-DD');
        this.dateRange = [startTime, endTime];
        await this.getClientNameOpts();
        this.getdata();
        this.getljtype()
    },
    computed:{
      
    },
    methods: {
        // 获取行政区
        async getClientNameOpts () {
            const { data } = await this.$axios.get(`${this.$url}/GetRegionListApi`);
            this.clientNameOpts = data;
            if (localStorage.getItem('clentno')) {
                this.searchForm.REGION_ID = localStorage.getItem('clentno');
                this.changeStreet(this.searchForm.REGION_ID);
            } else {
                this.searchForm.REGION_ID = data[0].REGION_ID;
                this.changeStreet(this.searchForm.REGION_ID);
                if (localStorage.getItem('STREET_NO') && localStorage.getItem('STREET_NO') !== 'null') {
                    this.searchForm.STREET_ID = localStorage.getItem('STREET_NO');
                    this.changeCommunity(this.searchForm.STREET_ID);
                }
            }
        },
        // 获取街道
        async changeStreet (val) {
            const { data } = await this.$axios.get(`${this.$url}/sreetListsApi?id=${val}`);
            this.streetOpts = data;
        },
        handleClick(){
            this.$axios({
                url: this.$surl+ '/GetStreetGarbageCollectionDetailApi',
                method: 'get',
                params:{
                    startTime: this.dateRange[0],
                    endTime: this.dateRange[1],
                    STREET_ID: this.rowbobject.STREET_ID,
                    TYPE_ID: this.activeName
                }
            }).then(item=>{
                console.log(item)
                this.garbage = Object.assign([],item.data)
            })
        },
        getljtype(){
            this.$axios({
                url:this.$url+ '/GetRubbishTypeApi',
                method: 'get'
            }).then(item=>{
                // console.log(this.TYPE_ID)
                this.ljtype =Object.assign([],item.data)
            })
        },
        getdata(){
            let clientNo = '';
            let level = '';
            if (this.searchForm.STREET_ID) {
                level = '街道';
                clientNo = this.searchForm.STREET_ID;
            } else if (this.searchForm.REGION_ID) {
                level = '行政区';
                clientNo = this.searchForm.REGION_ID;
            }
            const startTime = this.dateRange[0];
            const endTime = this.dateRange[1];
            let that = this
            that.$axios({
                url: this.$surl+'/GetStreetGarbageCollectionApi',
                method: 'get',
                // GetStreetGarbageCollectionDetailApi
                params:{
                    startTime,
                    endTime,
                    ClientNo: clientNo,
                    Level: level
                }
            }).then(item=>{
                this.tableData = Object.assign([],item.data)
                // var totalscore = item.data.Recyclable+item.data.Other+item.data.Kitchen+item.data.Harmful
                // // this.tableData.push(totalscore)
                // console.log(totalscore)
                // console.log(this.tableData)
            //    this.tableData.totalscore = isnumber(item.data.Recyclable)+isnumber(item.data.Other)+isnumber(item.data.Kitchen)+isnumber(item.data.Harmful)
            })
            // console.log(data)
        },
        // 搜索
        search(form){
             var startTime,endTime;
            startTime = new Date(form.value1[0]);
            endTime = new Date(form.value1[0])
            startTime = startTime.getFullYear() + '/' + (startTime.getMonth() + 1) + '/' + startTime.getDate() + ' '
            endTime = endTime.getFullYear() + '/' + (endTime.getMonth() + 1) + '/' + endTime.getDate() + ' ' 
            this.tableData.filter(item=>{
                console.log(item.TIME.split('~')[0])
            })
//             console.log(startTime
// ,endTime)
        //    form.value1.forEach(item=>{
        //        var d =new Date(item)
        //        d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
        //        console.log(d)
        //    })
// var d = new Date('Thu May 12 2019 08:00:00 GMT+0800 (中国标准时间)'); 
// d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
        },
         mohu() {
            this.getdata();
            // console.log(this.form.name)
            // var search = this.name;
            // console.log(search)
            // var newdate = [];
            // if(search){
            //     if(search)
            //      this.tableData.filter(item=>{
            //         if(item.name.indexOf(search) != -1){
            //             newdate.push(item)
            //         }
            //     })
            // }else if (search == ''){
            //     console.log(this.tableData)
            // }
            // this.tableData = newdate
        },

        // 编辑操作
        handleEdit(index, row) {
            this.rowbobject=Object.assign([],row)
            this.form = row;
            this.editVisible = true;
            this.handleClick()
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            console.log(this.currentPage)
            // this.$set(this.query, 'pageIndex', val);
            // this.getData();
        },
        handleSizeChange(size){
            this.pagesize = size;
            console.log(this.pagesize)
        }
    }
}
</script>
<style scoped>

</style>